<template>
  <div style="width:100%;overflow:hidden">
    <div class="header-top-box" id="header_h" v-if="isShowImg">
      <i class="el-icon-close" @click="changeShowImg"></i>
      <img src="../../../public/img/header_img.png" alt />
    </div>
    <div class="report-box flex" :style="{ height: boxh-headerH + 'px' }">
      <div class="flex" id="father">
        <!-- 时间轴 -->
        <div class="time-box" v-if="reportIndex!=1">
          <el-timeline>
            <el-timeline-item v-for="(item, i) in timeList" :key="i" :class="item.id?'':'year'">
              <span
                v-if="item.id"
                :class="activeIndex==i?'month-style active':'month-style'"
                @click="()=>changeMonth(item,i)"
              >{{item.cnTimestamp + '月'}}</span>
              <span v-else class="year-style">{{item.timestamp}}年</span>
            </el-timeline-item>
          </el-timeline>
        </div>
        <!-- 报告列表 -->
        <div class="report-list-box" :style="{ height: boxh-30-headerH + 'px' }">
          <div class="report-list" id="box" :style="{ width: isCollapse ? 0: leftListWidth + 'px' }" >
            <div class="report-tit" v-show="$route.path == '/home/historyPage'  ">

            </div>
            <el-collapse v-model="activeName" accordion @change="changeCollapse" >
              <template v-for="(item,i) in oneLevelList">
                <el-collapse-item  :name="i" :key="i">
                  <template slot="title">
                    <div class="report-collapse-tit">
                      <span>
                        {{ item.name }}
                      </span>
                      <span>
                        <i v-show="item.templateType == 1 && home.userInfoVo.superAccount != 0" class="el-icon-message" title="发送邮件" @click.stop="showEmailBox"></i>
                        <i v-show="item.templateType == 1 && home.userInfoVo.superAccount != 0" class="el-icon-download" :title="home.userInfoVo.superAccount==2?'试用账号，无法下载':'下载报告'"
                         @click.stop="downloadBtn(item.id)"></i>
                      </span>

                    </div>
                  </template>
                  <div class="tree-box-content" >
                    <el-tree
                      :style="{ height: boxh-30-headerH-oneLevelList.length * 31 - ($route.path == '/home/historyPage'? 40 : 0 )  + 'px',overflowY:'auto', overflowX: 'hidden'}"
                      v-if="showReportTree"
                      :data="treeData"
                      :props="defaultProps"
                      @node-click="handleNodeClick"
                      node-key="id"
                      ref="reportTree"
                      :expand-on-click-node="false"
                      :default-expand-all="true"
                      style="width: 100%"
                    ></el-tree>
                  </div>
                </el-collapse-item>
              </template>
            </el-collapse>
          </div>

          <!-- 拖动灰块 -->
          <div class="grey-box" v-show="isMove" ></div>

           <!-- 收缩栏 -->
          <div
            class="contraction-bar"
            id="scale"
            :style="`
              left: ${leftListWidth - parseInt(contractionBarWidth/2) }px;
              width: ${ contractionBarWidth }px
            `"
            @mousedown.stop="mouseDownSc"
          >

          </div>


          <!-- 侧边 收缩栏 -->
          <div v-show="!showRightBtn" class="show-menu-btn show-left" @click=" showRightBtnFun ">
            <i class="el-icon-back"></i>
          </div>
          <div
            v-show="showRightBtn"
            class="show-menu-btn hidden-left"
            @click=" isCollapse = false; showRightBtn = false "
          >
            <i class="el-icon-right"></i>
          </div>
        </div>

        <!-- 内容区域 -->
        <div class="report-content">
          <!-- 头部 -->
          <div class="report-content-header">
            <div class="report-l" v-show="opt.nowYear" >{{opt.nowYear}}年度{{parseInt(opt.nowMonth)}}月{{opt.titleName}}</div>
            <div class="report-r">
              <el-input
                class="searchInput"
                placeholder
                v-model="inputSearch"
                style="width: 200px; margin-right: 20px"
                size="mini"
              >
              <el-button v-show="totalIndex>0" slot="append" :disabled="searchIndex-1<=-1" @click="searchIndex=searchIndex-1" icon="el-icon-arrow-up" size="mini"></el-button>
              <el-button v-show="totalIndex>0" slot="append" :disabled="searchIndex>=totalIndex"  @click="searchIndex=searchIndex+1" icon="el-icon-arrow-down" size="mini"></el-button>
              </el-input>
            </div>
          </div>
          <!-- 内容 -->
          <div :style="{ height: boxh-65-headerH + 'px' }" ref="contentBox" >
            <report-page-content
              ref="iframeBox"
              v-if="inputSize>20"
              :reportId="reportId"
              :getTreeList="getTreeList"
              :positionId="positionId"
              :inputSearch="inputSearch"
              :searchIndex="searchIndex"
              :inputPage="Number(inputPage)"
              @allPageFn="allPageFns"
              :initOnce="initOnce"
              @closeInit="closeInitOnce"
              :scaleSize="scaleSize"
              :fixId="fixId"
              @gotoGis="gotoGis"
            ></report-page-content>

            <report-page-content-double
              v-if="inputSize<=20 "
              ref="remarkCaruselBox"
              :reportId="reportId"
              :getTreeList="getTreeList"
              :positionId="positionId"
              :inputSearch="inputSearch"
              :searchIndex="searchIndex"
              :height="boxh-67-headerH"
              :doubleIndex="doubleIndex"
              :inputPage="Number(inputPage)"
              @allPageFn="allPageFns"
              :scaleSize="scaleSize"
              @gotoGis="gotoGis"
            ></report-page-content-double>
          </div>
        </div>
      </div>

      <!-- 底部 -->
      <div class="report-footer">
        <div class="footer-text">中国信息通信研究院提供数据支持</div>
        <div style="display:flex;align-items:center;">
          <!-- 切换页 -->
          <div class="report-page">
            <el-button
              size="mini"
              style="padding:5px"
              :disabled="inputPage==1"
              @click.stop.prevent="pageBtn(0)"
            >
              <i class="el-icon-caret-left" style="font-size:16px"></i>
            </el-button>
            <el-input
              class="numberInput m-l-sm m-r-xs"
              @change="inputPageChange"
              v-model="inputPage"
              size="mini"
              style="width: 30px"
            ></el-input>
            <span class="total-page">/{{allPage}}</span>
            <el-button
              size="mini"
              style="padding:5px"
              :disabled="inputPage==allPage"
              @click.stop.prevent="pageBtn(1)"
            >
              <i class="el-icon-caret-right" style="font-size:16px"></i>
            </el-button>
          </div>

          <!-- 页面缩放 -->
          <div class="slider-box">
            <el-button
              style="margin-right:10px;color:#41485D;"
              type="text"
              icon="el-icon-minus"
              :disabled="inputSize==10"
              @click="sliderBtn(0)"
            ></el-button>
            <div style="width:100px">
              <el-slider v-model="inputSize" :show-tooltip="false" @input="inputSlider"></el-slider>
            </div>
            <el-button
              style="margin-left:10px;color:#41485D;"
              type="text"
              icon="el-icon-plus"
              :disabled="inputSize==100"
              @click="sliderBtn(1)"
            ></el-button>
            <span style="margin-left:20px">{{inputSize*5}}%</span>
          </div>
        </div>
      </div>

      <!-- 发送弹窗 -->
      <el-dialog title="发送邮件" :visible.sync="emailDialog" width="450px" @closed="cancelForm">
        <el-form ref="emailForm" :model="emailForm" label-width="80px" >
          <el-form-item
            label="收件人："
            prop="addressee"
            :rules="emailRules"
          >
            <el-input v-model="emailForm.addressee" name="email" autocomplete="on" placeholder="请选择邮箱地址使用 , 隔开" ></el-input>
          </el-form-item>
          <el-form-item label="主题：">
            <el-input v-model="emailForm.theme" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="正文：">
            <el-input type="textarea" :rows="3" v-model="emailForm.mainText" :disabled="true"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer">
          <el-button  @click="sendEmail('emailForm')" :loading="emailForm.sendLoading">发送</el-button>
          <el-button @click="cancelForm">取消</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import ReportPageContent from './reportPageContent'
import ReportPageContentDouble from './reportPageContentDouble'
import { getCNTimestamp } from '@/utils/index'

export default {
  name: 'reportPage',
  components: { ReportPageContent, ReportPageContentDouble },
  inject: [ 'reload' ],
  data() {

    var checkEmail = (rule, value, callback) => {
      // 支持 多邮箱 分号隔开 的正则
      const mailReg = /^((([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6}\,))*(([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})))$/;
      if (!value) {
        return callback(new Error('邮箱不能为空'))
      }
      // setTimeout(() => {
        if (mailReg.test(value)) {
          let list = value.split(',');
          if(list.length > 10) {
            callback(new Error('邮箱地址不能大于十个'))
          }else {
            callback()
          }
        } else {
          callback(new Error('请输入正确的邮箱格式'))
        }
      // }, 100)
    }
    return {
      searchIndex:0,
      totalIndex:0,
      initOnce: true, //用来控制组件方法只执行一次
      scaleSize: 1.5, //用来做点击 +按钮 做初始化比例
      oldInputSize: 20, //记录旧的inputSize
      fixId: '1', //记录翻页、自输页码的page拼凑值 或者点击列表的id值
      isCollapse: false,//侧边收缩栏是否收缩
      showRightBtn: false,
      showRightBtnTimer: '',
      reportIndex: 1,
      boxh: 0,
      headerH: 0,
      activeIndex: 1,
      activeName: 0,
      timeList: [],
      oneLevelList: [],
      treeData: [],
      getTreeList: [],
      reportId: '',
      positionId: '',
      inputSearch: '',
      emailDialog: false, //邮件弹窗
      emailForm: {
        //发送邮件
        addressee: '',
        theme: '',
        mainText: '',
        sendLoading: false
      },
      emailRules:  [
        { required: true, message: '请输入邮箱地址', trigger: 'blur' },
        { validator: checkEmail, trigger: ['blur', 'change'] }
      ],
      opt: {
        //选择时间及标题
        nowYear: null,
        nowMonth: null,
        titleName: null
      },
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      allPage: 0,
      inputPage: 1,
      selectIndex: '',
      inputSize: 30, //纸张缩放大小

      doubleIndex: 0, //双栏当前页

      isShowImg: true, //是否显示头部大图

      leftListWidth: 288,
      isMove: false,
      startX: 0,
      originalX: 288,
      contractionBarWidth: 14,
      showReportTree: true,  //展示树形图
      pointonIdTimer: null,  //定位id 定时清除计时器
      reloadTimer: null, //重载的计时器 用于滚动到之前位置
    }
  },
  computed: {
    ...mapState(['home']),
  },
  watch: {
    '$route.path': {
      handler(val) {
        this.reportIndex = this.$route.path == '/home/currentPage' ? 1 : 2
        // console.log(1,'currentPage');
        // this.getMenuList(); 不需要多余的操作

      },
      deep: true
    },
    doubleIndex: {
      handler(a) {
        this.setSize()
      }
    },
    inputPage: {
      handler(a) {
        if (a > this.allPage) this.inputPage = this.allPage

        // 固定dom节点id
        this.fixId = 'page' + (this.inputPage - 1);
      }
    },
    treeData: function() {
      //dom渲染执行
      this.$nextTick(function() {
        const box = document.getElementById('header_h')
        const H = box ? box.clientHeight + 10 : 0
        this.headerH = H
      })
    }
  },
  created() {
    this.reportIndex = this.$route.path == '/home/currentPage' ? 1 : 2;
    this.getH()
    this.getMenuList();

  },
  mounted() {
    // 获取最近一次发送的邮件地址;
    this.getLastReportMail();
  },
  methods: {
    // 跳转到GIS页面
    gotoGis(form) {
      console.log(form);
      console.log( this.$root )
      switch(form.routType) {
        case 'user':
          this.$root.form = form;
          this.$router.push({
            path:"/gisPage/user",
            // query:{ form }
          });
        break
      }
    },
    // 获取上次邮件发送地址
    getLastReportMail() {
      return this.api.getLastReportMail()
              .then(( res ) => {
                if( res.code == 1 ) {
                  this.emailForm.addressee = res.data;
                }
                return true
              })
    },
    // 打开发送邮箱的弹窗
    async showEmailBox() {
      this.emailDialog = await this.getLastReportMail();
    },
    showRightBtnFun() {
      this.isCollapse =  true;
      if(this.showRightBtnTimer) {
        clearTimeout(this.showRightBtnTimer);
      }
      this.showRightBtnTimer = setTimeout(() => {
        this.showRightBtn = true
      }, 190)
    },
    changeShowImg() {
      this.isShowImg = false
      this.headerH = 0
    },
    // 用于页面初始化加载完成 关闭判断
    closeInitOnce() {
      this.initOnce = false;
    },
    /**
     * 页面排版大小 滑块
     */
    inputSlider(e) {

      // 记录 旧的inputSize 用于加载单页布局 初始化操作
      this.oldInputSize = this.inputSize;

      e = e < 10 ? 10 : e
      this.inputSize = e

      // 需要传递size
      this.scaleSize = e / 20;



      this.setSize()
    },
    /**
     * 滑块左右边加减
     * num:0减 1加
     */
    sliderBtn(num) {

      // 记录 旧的inputSize 用于加载单页布局 初始化操作
      this.oldInputSize = this.inputSize;

      let a = this.inputSize
      switch (num) {
        case 0:
          a = a - 5 < 10 ? 10 : a - 5
          break
        case 1:
          a = a + 5 > 100 ? 100 : a + 5
          break
      }
      this.inputSize = a;



      // 需要传递size
      this.scaleSize = a / 20;

      this.setSize()
    },

    /**
     * 文档放大缩小
     */
    setSize() {

      const num = this.inputSize <= 20 ? 2 : 1
      const pageSize = this.inputSize / 20
      const scrollH = ((297 * 96) / 25.4 + 10).toFixed(2)
      const smallScrollH = (scrollH * pageSize).toFixed(2)
      const endMarginNum =
        Number(scrollH) * this.allPage - Number(smallScrollH) * this.allPage
      if (num == 1 && document.getElementById('reportcontent')) {
        // 单栏
        const zoomHtml = reportcontent.contentWindow.document.body
        const cssText = this.cssText(pageSize, endMarginNum, num)
        // console.log(cssText);
        zoomHtml.style.cssText += cssText

        if (this.oldInputSize > 20 ) {
          let a = 'page0';
          if(this.fixId !== '1') {
            a = this.fixId;
          }
          this.$refs.iframeBox.positioning(a);
        }



      } else {
        // 两栏
        const zoomHtmlT = document.getElementById('double' + this.doubleIndex)
        const cssText = this.cssText(pageSize, endMarginNum, num)
        if (zoomHtmlT) zoomHtmlT.style.cssText += cssText
      }
    },

    cssText(size, endMarginNum, num) {
      const a = `transform:scale(${size});-ms-transform:scale(${size});-webkit-transform-origin:scale(${size});-moz-transform-origin:scale(${size});-o-transform:scale(${size});`
      const b = `margin-bottom:-${endMarginNum}px;`
      const t = `margin-top:-${(1 - size) * 560}px;`
      const b1 = `margin-bottom:-${(1 - size) * 560}px;`
      return num == 1 ? a + b : a + b1 + t
    },

    /**
     * 切换页
     * num:0上一页 1下一页
     */
    pageBtn(num) {
      const a = num === 1 ? this.inputPage + 1 : this.inputPage - 1
      this.inputPage = a
      this.positionId = 'page' + (a - 1)
      this.setDoubleIndex(a)
    },
    inputPageChange(e) {
      let a = parseInt(e)
      a = Number(a > this.allPage ? this.allPage : a)
      this.inputPage = a
      this.positionId = 'page' + (a - 1)
      this.setDoubleIndex(a)
    },

    /**
     * 总页数 当前页
     */
    allPageFns(name, value) {
      if (name == 'selectIndex') {
        this.$refs.reportTree[0].setCurrentKey(value)

      }
      this[name] = value
      console.log( name, value );
    },
    // 重载树形图
    reloadTree() {
      // 记录刷新前的 滚动位置
      let scrollTop = this.$refs.reportTree[0].$el.scrollTop;
      this.showReportTree = false;
      this.$nextTick( ( vm ) => {
        this.showReportTree = true;
        // 马上调会获取不到 所以加计时器
        if( this.reloadTimer ) {
          clearTimeout( this.reloadTimer )
        }
        this.reloadTimer = setTimeout(() => {
          this.$refs.reportTree[0].$el.scrollTop = scrollTop;
        }, 20);

      })
    },
    /**
     * 下载报告
     */
    downloadBtn( reportId ) {
      if(this.home.userInfoVo.superAccount==2){
        return;
      }
      window.location.href =
        process.env.VUE_APP_API_URL +
        '/caict/statisticReport/downReport?reportId=' +
        reportId
    },

    /**
     * 切换月份
     */
    changeMonth(item, i) {
      if (this.activeIndex != i) {
        const reports = item['reports']
        this.oneLevelList = reports
        let name = ''
        if (reports && reports.length > 0) {
          this.getReportTitle(reports[0].id);

          // 切换月份 需要切换发送邮件的正文以及标题
          let index = reports[0].fileName.indexOf('.');
          let theme = reports[0].fileName.substring(0, index);
          this.emailForm.theme = theme;
          this.emailForm.mainText = theme + '，请查收';

          name = reports[0]['name']
        }
        this.opt = {
          nowYear: item.year,
          nowMonth: item.timestamp,
          titleName: name
        }
        this.activeIndex = i
      }
    },

    /**
     * 取消发送
     */
    cancelForm() {
      this.emailDialog = false
      this.emailForm.addressee = '';
      // 清除表单验证状态
      this.$refs.emailForm.resetFields();
    },

    /**
     * 发送邮件
     */
    sendEmail(formName) {
      this.emailForm.sendLoading = true
      // 因为目前只发送综合报告邮箱 所以 暂定reportId 为综合报告id
      let reportId = this.oneLevelList[0].id;
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.api
            .sendReportMail({
              receiveName: this.emailForm.addressee,
              subject: this.emailForm.theme,
              htmlBody:
                '<p>松果大数据——' +
                this.emailForm.theme +
                '，请点击此处下载:<a href=' +
                process.env.VUE_APP_API_URL +
                '/caict/statisticReport/downReport?reportId=' +
                reportId +
                '>点击下载</a></p><p>或复制&nbsp;&nbsp;&nbsp;'+process.env.VUE_APP_API_URL +
                '/caict/statisticReport/downReport?reportId=' +
                reportId+'&nbsp;&nbsp;&nbsp;打开下载</p>'
            })
            .then(data => {
              this.emailForm.sendLoading = false
              this.cancelForm()
            })
        } else {
          return false
        }
      })
    },
    /**
     * 获取页面高度
     */
    getH() {
      const box = document.getElementById('app')
      const h = box && box.clientHeight
      this.boxh = h ? h - 60 : 100
    },

    /**
     * 切换 手风琴
     */
    changeCollapse(i) {
      if (i === 0 || i) {
        const item = this.oneLevelList[i]
        this.opt.titleName = item.name
        this.getReportTitle(item['id'])
      }
    },

    /**
     * 获取菜单列表数据 time
     */
    getMenuList() {
      const routeType = this.$route.meta.routeType //1报告页面 2gis页面 3设置页面
      let list = []
      const _this = this
      this.api.getReportListForIndex().then(data => {
        const dataList = data.data
        if (dataList && dataList.length > 0) {
          dataList.sort((a, b) => {
            return b.year * 100 + b.endMonth - (a.year * 100 + a.endMonth)
          })
          console.log(dataList);
          dataList.forEach((v, i) => {
            const month =
              String(v.endMonth).length == 1 ? '0' + v.endMonth : v.endMonth
            const reports = v.reports
            const index = list.findIndex(d => {
              return d['timestamp'] == v.year
            })
            // 没有当前年份需加入这个年份
            if (index == -1) {
              list.push({
                year: v.year,
                timestamp: v.year,
                id: null,
                reports: []
              })
            }
            let reportsList = [],
              firstName = null
            if (reports && reports.length > 0) {
              // 当前月份的所有报告
              reports.forEach((d, j) => {
                const name = this.levelOneReport(d.templateType)
                if (i == 0 && j == 0) {
                  // 初始化第一个数据展开 调用接口获取数据
                  this.getReportTitle(d.id)
                  firstName = name
                  const index = d.fileName.indexOf('.')
                  const theme = d.fileName.substring(0, index)
                  this.emailForm.theme = theme
                  this.emailForm.mainText = theme + '，请查收'
                }
                reportsList.push({
                  year: v.year,
                  month: month, //中文月份
                  id: d.id,
                  templateType: d.templateType,
                  name,
                  fileName: d.fileName,
                })
              })
            }
            if (i == 0) {
              this.opt = {
                nowYear: v.year,
                nowMonth: month ,
                titleName: firstName
              }
            }

            // 当前年份的所有月份
            list.push({
              timestamp: month ,
              cnTimestamp: getCNTimestamp( month ), //中文数字
              id: 'id', //用于判断是年份还是月份 假的
              reports: reportsList,
              year: v.year
            })
          })
        }
        console.log(list);
        _this.timeList = list
        if (list && list.length > 0) {
          const a = list[_this.activeIndex]['reports'];
          console.log(a);
          _this.oneLevelList = a
        }
      })
    },

    /**
     * 获取一级报告名称
     */
    levelOneReport(templateType) {
      let indexName = ''
      switch (templateType) {
        case 1:
          indexName = '第一册 综合报告'
          break
        case 2:
          indexName = '第三册 网络报告'
          break
        case 3:
          indexName = '第二册 市场报告'
          break
        case 4:
          indexName = '第四册 重点场景报告'
          break
        default:
      }
      return indexName
    },

    /**
     * 获取导航标题 内容 获取目录数据
     */
    getReportTitle(id, i=0) {
      this.treeData = []
      this.reportId = id;


      this.api
        .getReportIndexListByReportId({
          reportId: id
        })
        .then(data => {
          const list = data.data
          this.getTreeList = list
          list && list.length > 0 && this.getNeedTreeData(list)
        })
    },

    /**
     * 处理获取的树形数据
     * treeList[[[],[]],[[],[]]] 多维数组
     */
    getNeedTreeData(list) {
      let treeList = [],
        i = 0,
        j = 0,
        k = 0
      list.forEach(v => {
        // 首先是
        i = v.levelIndex - 1 //一级题号
        j = v.level //二级或者三级或者更多级题号
        if (!treeList[i]) {
          //一级
          treeList.push({
            id: v.htmlId,
            label: v.name, //名称
            page: v.page, //页数
            children: []
          })
        } else {
          treeList = this.typographyLebel(treeList, v, i, j)
        }
      })
      this.treeData = treeList
    },

    /**
     * 根据 level 排数据
     * 二级或者三级
     */
    typographyLebel(treeList, v, i, j) {
      let a = treeList[i]['children'],
        b = a[a.length - 1] ? a[a.length - 1]['children'] : []
      if (j == 2) {
        a = this.setData(a, v)
        treeList[i]['children'] = a
      } else if (j == 3) {
        b = this.setData(b, v)
        a[a.length - 1]['children'] = b
      } else if (j == 4) {
        let c = b[b.length - 1]['children']
        c = this.setData(c, v)
        b[b.length - 1]['children'] = c
      }
      return treeList
    },

    // 塞值
    setData(list, v) {
      list.push({
        id: v.htmlId,
        label: v.name, //名称
        page: v.page, //页数
        children: []
      })
      return list
    },

    /**
     * 树形节点点击
     */
    handleNodeClick(val) {
      this.inputPage = val.page;

      // 固定dom节点id
      this.fixId = val.id;

      this.positionId = val.id
      this.setDoubleIndex(val.page);

    },

    setDoubleIndex(a) {
      this.doubleIndex = (a % 2 == 0 ? a / 2 : (a + 1) / 2) - 1;
      // pointonId 置空 用于修复下次跳转到同节点不跳的问题
      if( this.pointonIdTimer ) {
        clearTimeout( this.pointonIdTimer )
      }
      // reload 用于清除 选中缓存
      this.reloadTree();
      this.pointonIdTimer = setTimeout(() => {

        this.$refs.reportTree[0].setCurrentKey(this.positionId)
        this.positionId = null;
      }, 50);



    },

    /**
     * 拖拽改变宽度
     */
    mouseDownSc(e) {
      e.stopPropagation()
      e.preventDefault()
      const scale = document.getElementById('scale')
      let w1 = box.offsetWidth
      let x1 = e.clientX
      let width = null;

      this.isMove = true;
      this.startX = e.clientX;
      this.originalX = scale.offsetLeft;
      this.contractionBarWidth = 50;


      document.onmousemove = (ev) => {

        //用鼠标的位置减去鼠标初始位置，得到拖动的距离
        let left = ev.clientX - x1;
        left = parseInt(left);
        width = w1 + left;
        this.leftListWidth = width;

      }

      document.onmouseup = (e) => {
        if(width !== null) {
          this.leftListWidth = parseInt(width);
        }
        this.contractionBarWidth = 14;
        this.isMove = false;

        document.onmousemove = null;
        document.onmouseup = null;
      }
      return false
    },
  }
}
</script>
<style lang="scss" scoped>
.report-box {
  width: 100%;
  flex-direction: column;

  .time-box {
    background: #fafafa;
    width: 93px;
    padding: 10px;

    .year-style {
      font-family: Source Han Sans CN;
      color: #0297ff;
      font-size: 16px;
    }
    .month-style {
      font-family: Source Han Sans CN;
      color: #0e2345;
      font-size: 12px;
      cursor: pointer;
    }
    .active {
      width: 36px;
      height: 20px;
      background: #0297ff;
      border-radius: 10px;
      display: inline-block;
    }
  }

  .report-list-box {
    background: #fff;
    border-right: 1px solid #ced3e0;
    display: flex;
    position: relative;

    .report-list {
      flex-grow: 1;
      width: 288px;
      overflow: hidden;
      transition: all 0.2s ease-out;

      .report-tit {
        padding: 0 15px;
        color: #666;
        font-size: 14px;
        height: 40px !important;
        white-space: nowrap;
        background: #fafafa;
      }

      // 手风情报告标题
      .report-collapse-tit {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-right: 20px;
        > span > i {
          font-size: 16px;
          margin-left: 10px;
        }
      }
    }
    .contraction-bar {
      height: 100%;
      cursor: ew-resize;
      position: absolute;
      top: 0;
      z-index: 1;
    }

    // 灰块
    .grey-box {
      position: fixed;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      z-index: 1;

    }

    // 侧边收缩栏
    .show-menu-btn {
      cursor: pointer;
      position: absolute;
      top: 50%;
      z-index: 3;
      text-align: center;
      background: #99a2b1;
      height: 48px;
      line-height: 48px;
      width: 24px;
      color: #fff;
    }
    .hidden-left {
      border-radius: 0 8px 8px 0;
      left: 0;
    }
    .show-left {
      border-radius: 8px 0 0 8px;
      right: 0;
    }
  }

  .report-content {
    background: #fff;
    flex-grow: 1;
    .report-content-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 20px;
      height: 35px;
      background: #fafafa;
      box-shadow: 0px 2px 1px 0px rgba(153, 153, 153, 0.19);

      .report-l {
        color: #0297ff;
        font-size: 14px;
        font-family: Source Han Sans CN;
      }
      .report-r {
        display: flex;
        align-items: center;

        .el-icon-message {
          font-size: 20px;
        }
        .send-btn {
          display: flex;
          align-items: center;
        }
      }
    }

    .down-load {
      width: 50px;
      height: 50px;
      display: flex;
      justify-content: center;
      align-items: center;
      position: fixed;
      bottom: 55px;
      right: 15px;
      background: #0096ff;
      cursor: pointer;
      border-radius: 100%;
      z-index: 10;
    }
  }
}
.flex {
  display: flex;
  flex-grow: 1;
}
.report-footer {
  height: 30px;
  line-height: 30px;
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
  background: #f4f6f9;
  .footer-text {
    color: #0e2345;
    font-size: 12px;
  }
  .report-page {
    display: flex;
    align-items: center;
    .total-page {
      margin: 0 10px 0 5px;
      color: #41485d;
    }
  }
  .slider-box {
    width: 226px;
    display: flex;
    align-items: center;
  }
}
.header-top-box {
  margin-bottom: 10px;
  position: relative;
  img {
    width: 100%;
    height: auto;
  }
  i {
    position: absolute;
    right: 20px;
    top: 10px;
    font-size: 24px;
    color: #fff;
    cursor: pointer;
  }
}
</style>
